<template>
  <view class="mxp-notice" @tap="clickHandler">
    <slot name="icon">
      <view v-if="showIcon" class="left-icon">
        <mxp-icon name="tongzhi" :color="color" size="18px"></mxp-icon>
      </view>
    </slot>
    <swiper
      :disableTouch="disableTouch"
      :vertical="step ? false : true"
      :circular="true"
      :interval="duration"
      :autoplay="!disableScroll"
      class="swiper"
      :style="[swiperStyle]"
      @change="noticeChange"
    >
      <swiper-item v-for="(item, inx) in newText" :key="inx" class="item">
        <text class="text" :style="[textStyle]">{{ item }}</text>
      </swiper-item>
    </swiper>
    <view v-if="['arrows', 'close'].includes(iconType)" class="right-icon">
      <mxp-icon v-if="iconType === 'arrows'" name="youjiantou" size="14px" :color="color"></mxp-icon>
      <mxp-icon v-if="iconType === 'close'" key="mxp-icon-2" name="guanbi" size="14px" :color="color" @click="close"></mxp-icon>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { type CSSProperties, type PropType, computed, ref } from 'vue';
  import { publicStyeProps } from '../../mxp-tool/utils/public-props';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import MxpIcon from '../../mxp-icon/mxp-icon.vue';
  import type { SwiperOnChangeEvent } from 'mxp-uni-types';
  defineOptions({
    name: 'mxp-notice-column',
  });

  const props = defineProps({
    /** 显示的内容，数组 */
    text: { type: [Array, String] as PropType<string[] | string>, default: '' },
    /** direction = row时，是否使用步进形式滚动 */
    step: { type: Boolean, default: false },
    /** 是否显示左侧的音量图标 */
    showIcon: { type: Boolean, default: true },
    /** 右侧图标  arrows-显示右箭头，close-显示关闭图标，none-不显示图标 */
    iconType: { type: String as PropType<'arrows' | 'close' | 'none'>, default: 'close' },
    /** 文字颜色，各图标也会使用文字颜色 */
    color: { type: String as PropType<$AllColorStr>, default: '#E6A23C' },
    /** 字体大小 */
    fontSize: { type: String as PropType<$SizeUnitStr>, default: '14px' },
    /** 滚动一个周期的时间长，单位ms */
    duration: { type: Number, default: 2000 },
    /** 是否禁止用手滑动切换 */
    disableTouch: { type: Boolean, default: true },
    /** 是否禁止滚动，仅`direction="column"生效` */
    disableScroll: { type: Boolean, default: false },
    ...publicStyeProps,
  });
  defineSlots<{
    /** 自定义图标 */
    icon: () => void;
  }>();
  const emits = defineEmits<{
    (e: 'click', index: number): void;
    (e: 'close'): void;
    (e: 'change', index: number): void;
  }>();

  const index = ref(0);
  /** 文字内容的样式 */
  const newText = computed(() => {
    return Array.isArray(props.text) ? props.text : [props.text || ''];
  });

  const textStyle = computed<CSSProperties & { lines?: number }>(() => {
    const style: CSSProperties & { lines?: number } = { color: props.color, fontSize: props.fontSize };

    // #ifndef APP-NVUE
    style.display = '-webkit-box';
    style.boxOrient = 'vertical';
    style.WebkitBoxOrient = 'vertical';
    style.lineClamp = 1;
    style.WebkitLineClamp = 1;
    style.overflow = 'hidden';
    // #endif
    // #ifdef APP-NVUE
    style.lines = 1;
    style.textOverflow = 'ellipsis';
    // #endif
    return style;
  });

  const swiperStyle = computed<CSSProperties>(() => {
    const style: CSSProperties = {};
    // #ifdef APP-NVUE
    style.flex = 1;
    style.height = '16px';
    // #endif
    return style;
  });
  /** 显示的通知条变化 */
  function noticeChange(event: SwiperOnChangeEvent) {
    index.value = event.detail.current;
    emits('change', index.value);
  }

  /** 点击通告栏 */
  function clickHandler() {
    emits('click', index.value);
  }

  /** 点击关闭按钮 */
  function close() {
    emits('close');
  }
</script>

<style lang="scss" scoped>
  .mxp-notice {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;

    .left-icon {
      align-items: center;
      margin-right: 5px;
    }

    .right-icon {
      align-items: center;
      margin-left: 10px;
    }

    .swiper {
      display: flex;
      flex: 1;
      flex-flow: row nowrap;
      align-items: center;
      height: 16px;

      .item {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        overflow: hidden;

        .text {
          font-size: 14px;
        }
      }
    }
  }
</style>
